import React ,{useEffect}from 'react'
import {useSelector,useDispatch} from "react-redux"
import * as api from "../../api/index"
import { Tabs ,Grid,Image} from 'react-vant';
import Tabs_content from '../../components/Tabs_content';

function Home() {
    const dispatch = useDispatch()

    useEffect(()=>{
        dispatch(api.get_list())
    },[dispatch])
    const tab_list = useSelector((state)=>{
        return state.reducer.list
    })
    const tab_listChildren = useSelector((state)=>{
        return state.reducer.listChildren
    })

    const set_listchildren = (el) =>{
        dispatch(api.set_ListChildren(el))
    }
    return (
        <div className="home">
            <Tabs onChange={set_listchildren}>
                {
                    tab_list&&tab_list.map((item,index) => {
                        return <Tabs.TabPane key={index} title={`标签${item.title}`}>
                               <Tabs_content tab_listChildren={tab_listChildren}/>
                        </Tabs.TabPane>
                    })                
                }
            </Tabs>
        </div>
    )
}

export default Home
